{% extends 'tasks/base.html' %}

{% block title %}任务列表{% endblock %}

{% block content %}
    <h1 class="mb-4">任务列表</h1>

    <div class="mb-3">
        <a href="{% url 'task-create' %}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> 创建新任务
        </a>
        {% if not user.is_authenticated %}
            <div class="alert alert-info mt-2">
                <p>您正在以匿名用户身份使用系统。您可以创建和查看任务，但为了获得个性化体验，请考虑 <a
                        href="{% url 'login' %}">登录</a> 或 <a href="{% url 'register' %}">注册</a>。</p>
            </div>
        {% endif %}
    </div>

    <!-- 筛选表单 -->
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">筛选任务</h5>
            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse"
                    data-bs-target="#filterCollapse" aria-expanded="false" aria-controls="filterCollapse">
                <i class="bi bi-funnel"></i> 显示/隐藏筛选
            </button>
        </div>
        <div class="collapse {% if current_filters.project or current_filters.system or current_filters.test_engineer or current_filters.dev_engineer or current_filters.project_manager or current_filters.product_manager %}show{% endif %}"
             id="filterCollapse">
            <div class="card-body">
                <form method="get" action="{% url 'task-list' %}" class="row g-3">
                    <div class="col-md-4">
                        <label for="project" class="form-label">项目</label>
                        <select class="form-select" id="project" name="project">
                            <option value="">-- 所有项目 --</option>
                            {% for project in projects %}
                                <option value="{{ project }}"
                                        {% if current_filters.project == project %}selected{% endif %}>{{ project }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="system" class="form-label">系统</label>
                        <select class="form-select" id="system" name="system">
                            <option value="">-- 所有系统 --</option>
                            {% for system in systems %}
                                <option value="{{ system }}"
                                        {% if current_filters.system == system %}selected{% endif %}>{{ system }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="test_engineer" class="form-label">测试负责人</label>
                        <select class="form-select" id="test_engineer" name="test_engineer">
                            <option value="">-- 所有测试负责人 --</option>
                            {% for engineer in test_engineers %}
                                <option value="{{ engineer }}"
                                        {% if current_filters.test_engineer == engineer %}selected{% endif %}>{{ engineer }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="dev_engineer" class="form-label">开发负责人</label>
                        <select class="form-select" id="dev_engineer" name="dev_engineer">
                            <option value="">-- 所有开发负责人 --</option>
                            {% for engineer in dev_engineers %}
                                <option value="{{ engineer }}"
                                        {% if current_filters.dev_engineer == engineer %}selected{% endif %}>{{ engineer }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="project_manager" class="form-label">项目经理</label>
                        <select class="form-select" id="project_manager" name="project_manager">
                            <option value="">-- 所有项目经理 --</option>
                            {% for manager in project_managers %}
                                <option value="{{ manager }}"
                                        {% if current_filters.project_manager == manager %}selected{% endif %}>{{ manager }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="product_manager" class="form-label">产品经理</label>
                        <select class="form-select" id="product_manager" name="product_manager">
                            <option value="">-- 所有产品经理 --</option>
                            {% for manager in product_managers %}
                                <option value="{{ manager }}"
                                        {% if current_filters.product_manager == manager %}selected{% endif %}>{{ manager }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-12 d-flex justify-content-between">
                        <a href="{% url 'task-list' %}" class="btn btn-secondary">重置筛选</a>
                        <button type="submit" class="btn btn-primary">应用筛选</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 筛选结果提示 -->
    {% if current_filters.project or current_filters.system or current_filters.test_engineer or current_filters.dev_engineer or current_filters.project_manager or current_filters.product_manager %}
        <div class="alert alert-info mb-4">
            <h6 class="mb-2">当前筛选条件:</h6>
            <div class="d-flex flex-wrap gap-2">
                {% if current_filters.project %}
                    <span class="badge bg-primary">项目: {{ current_filters.project }} <a href="?
                            {% for key, value in current_filters.items %}{% if key != 'project' and value %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
                                                                                          class="text-white ms-1"
                                                                                          title="移除此筛选"><i
                            class="bi bi-x-circle"></i></a></span>
                {% endif %}
                {% if current_filters.system %}
                    <span class="badge bg-primary">系统: {{ current_filters.system }} <a href="?
                            {% for key, value in current_filters.items %}{% if key != 'system' and value %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
                                                                                         class="text-white ms-1"
                                                                                         title="移除此筛选"><i
                            class="bi bi-x-circle"></i></a></span>
                {% endif %}
                {% if current_filters.test_engineer %}
                    <span class="badge bg-primary">测试负责人: {{ current_filters.test_engineer }} <a href="?
                            {% for key, value in current_filters.items %}{% if key != 'test_engineer' and value %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
                                                                                                      class="text-white ms-1"
                                                                                                      title="移除此筛选"><i
                            class="bi bi-x-circle"></i></a></span>
                {% endif %}
                {% if current_filters.dev_engineer %}
                    <span class="badge bg-primary">开发负责人: {{ current_filters.dev_engineer }} <a href="?
                            {% for key, value in current_filters.items %}{% if key != 'dev_engineer' and value %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
                                                                                                     class="text-white ms-1"
                                                                                                     title="移除此筛选"><i
                            class="bi bi-x-circle"></i></a></span>
                {% endif %}
                {% if current_filters.project_manager %}
                    <span class="badge bg-primary">项目经理: {{ current_filters.project_manager }} <a href="?
                            {% for key, value in current_filters.items %}{% if key != 'project_manager' and value %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
                                                                                                      class="text-white ms-1"
                                                                                                      title="移除此筛选"><i
                            class="bi bi-x-circle"></i></a></span>
                {% endif %}
                {% if current_filters.product_manager %}
                    <span class="badge bg-primary">产品经理: {{ current_filters.product_manager }} <a href="?
                            {% for key, value in current_filters.items %}{% if key != 'product_manager' and value %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
                                                                                                      class="text-white ms-1"
                                                                                                      title="移除此筛选"><i
                            class="bi bi-x-circle"></i></a></span>
                {% endif %}
            </div>
        </div>
    {% endif %}

    <div class="task-columns">
        <div class="task-column">
            <div class="card mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">待办</h5>
                </div>
                <div class="card-body">
                    {% for task in todo_tasks %}
                        <div class="card task-card task-status-todo">
                            <div class="card-body">
                                <h5 class="card-title">{{ task.title }}</h5>
                                {% if task.Projectname %}
                                    <p class="card-text"><small class="text-muted">项目: {{ task.Projectname }}</small>
                                    </p>
                                    <p class="card-text"><small class="text-muted">系统:{{ task.system }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">测试负责人:{{ task.TestEngineer }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">开发负责人:{{ task.DevelopmentEngineer }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">项目经理:{{ task.ProjectManager }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">产品经理:{{ task.ProductManager }}</small></p>
                                {% endif %}


                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    {% if task.due_date %}
                                        <small class="text-muted">截止日期: {{ task.due_date }}</small>
                                    {% endif %}
                                    {% if task.testprogress != '0' %}
                                        <small class="badge bg-info">进度: {{ task.testprogress }}%</small>
                                    {% endif %}
                                </div>

                                <div class="d-flex justify-content-between">
                                <span class="badge bg-secondary">
                                    {% if task.assigned_to %}
                                        分配给: {{ task.assigned_to.username }}
                                    {% else %}
                                        <span class="anonymous-badge">未分配</span>
                                    {% endif %}
                                </span>
                                    <div>
                                        <a href="{% url 'task-detail' task.id %}" class="btn btn-sm btn-info">查看</a>
                                        <a href="{% url 'task-update' task.id %}"
                                           class="btn btn-sm btn-warning">编辑</a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <p class="text-muted">没有待办任务</p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="task-column">
            <div class="card mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">进行中</h5>
                </div>
                <div class="card-body">
                    {% for task in in_progress_tasks %}
                        <div class="card task-card task-status-in_progress">
                            <div class="card-body">
                                <h5 class="card-title">{{ task.title }}</h5>
                                {% if task.Projectname %}
                                    <p class="card-text"><small class="text-muted">项目: {{ task.Projectname }}</small>
                                    </p>
                                    <p class="card-text"><small class="text-muted">系统:{{ task.system }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">测试负责人:{{ task.TestEngineer }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">开发负责人:{{ task.DevelopmentEngineer }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">项目经理:{{ task.ProjectManager }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">产品经理:{{ task.ProductManager }}</small></p>
                                {% endif %}


                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    {% if task.due_date %}
                                        <small class="text-muted">截止日期: {{ task.due_date }}</small>
                                    {% endif %}
                                    {% if task.testprogress != '0' %}
                                        <small class="badge bg-info">进度: {{ task.testprogress }}%</small>
                                    {% endif %}
                                </div>

                                <div class="d-flex justify-content-between">
                                <span class="badge bg-secondary">
                                    {% if task.assigned_to %}
                                        分配给: {{ task.assigned_to.username }}
                                    {% else %}
                                        <span class="anonymous-badge">未分配</span>
                                    {% endif %}
                                </span>
                                    <div>
                                        <a href="{% url 'task-detail' task.id %}" class="btn btn-sm btn-info">查看</a>
                                        <a href="{% url 'task-update' task.id %}"
                                           class="btn btn-sm btn-warning">编辑</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <p class="text-muted">没有进行中的任务</p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="task-column">
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">已完成</h5>
                </div>
                <div class="card-body">
                    {% for task in done_tasks %}
                        <div class="card task-card task-status-done">
                            <div class="card-body">
                                <h5 class="card-title">{{ task.title }}</h5>
                                {% if task.Projectname %}
                                    <p class="card-text"><small class="text-muted">项目: {{ task.Projectname }}</small>
                                    </p>
                                    <p class="card-text"><small class="text-muted">系统:{{ task.system }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">测试负责人:{{ task.TestEngineer }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">开发负责人:{{ task.DevelopmentEngineer }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">项目经理:{{ task.ProjectManager }}</small></p>
                                    <p class="card-text"><small
                                            class="text-muted">产品经理:{{ task.ProductManager }}</small></p>
                                {% endif %}

                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    {% if task.enddate %}
                                        <small class="text-muted">完成日期: {{ task.enddate }}</small>
                                    {% endif %}
                                    {% if task.testprogress != '0' %}
                                        <small class="badge bg-info">进度: {{ task.testprogress }}%</small>
                                    {% endif %}
                                </div>

                                <div class="d-flex justify-content-between">
                                <span class="badge bg-secondary">
                                    {% if task.assigned_to %}
                                        分配给: {{ task.assigned_to.username }}
                                    {% else %}
                                        <span class="anonymous-badge">未分配</span>
                                    {% endif %}
                                </span>
                                    <div>
                                        <a href="{% url 'task-detail' task.id %}" class="btn btn-sm btn-info">查看</a>
                                        <a href="{% url 'task-update' task.id %}"
                                           class="btn btn-sm btn-warning">编辑</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <p class="text-muted">没有已完成的任务</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取所有下拉选择框
            const selectElements = document.querySelectorAll('select');

            // 对每个下拉框进行处理
            selectElements.forEach(function (select) {
                // 获取所有选项
                const options = Array.from(select.options);
                const values = new Set();
                const duplicates = [];

                // 检测重复项
                options.forEach(function (option, index) {
                    // 跳过第一个选项（通常是"-- 所有xxx --"）
                    if (index === 0) return;

                    const value = option.value.trim();
                    if (value === '') return;

                    if (values.has(value)) {
                        duplicates.push(index);
                    } else {
                        values.add(value);
                    }
                });

                // 从后向前删除重复项（避免索引变化）
                duplicates.reverse().forEach(function (index) {
                    select.remove(index);
                });

                // 如果有重复项被删除，记录日志
                if (duplicates.length > 0) {
                    console.log(`从 ${select.id} 下拉框中删除了 ${duplicates.length} 个重复项`);
                }
            });
        });
    </script>
{% endblock %}